@import url('assets/style/theme.less');
@import url('assets/style/mixin.less');

.right-modal {
  padding: 24px;

  .title {
    font-size: 28px;
    margin: 24px 0;
    font-weight: 500;
  }

  .btn-wrap {
    flex-direction: row;
  }

  .address-img {
    width: 24px;
    height: 24px;
    margin: 5px 16px 0 0;
  }

  .btn {
    width: 200px;
    margin-right: 16px;
  }

  .select-area {
    flex-direction: row;

    .province-list {
      width: 240px;
      color: @black-opcity-4;
    }

    .list {
      height: calc(100vh - 410px - env(safe-area-inset-bottom));
      margin: 12px;
      flex: 1;
    }
  }

  .item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    padding-left: 24px;
    .fs(24px);

    .text {
      padding-right: 24px;
      line-height: 32px;
      font-weight: 400;
      .fs(24px);
    }
  }

  .item-selected {
    color: @primary-color;
    background: linear-gradient(90deg, #f6f6f6 0%, rgba(255, 255, 255, 0) 100%);

    .text-selected {
      color: @primary-color;
      font-weight: 500;
    }

    .selected-img {
      width: 24px;
      min-width: 24px;
      height: 24px;

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .prov {
    color: @black-opcity-4;
  }

  .footer {
    // margin: 24px 0;
    padding: 24px 32px;
    flex-direction: row;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    justify-content: space-between;

    .left-btn {
      margin-right: 16px;
    }

    .btn {
      flex: 1;
    }
  }

  .footer-x {
    bottom: 40px;
  }
}
